<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑文章</title>
</head>
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../css/editor.css">
<body>
<div id="ed">

    <el-container>
        <el-aside>
        <div class="lj">并没有做的图片上传组件</div>
        </el-aside>
        <el-main>
            <div>
                <div class="ha"><h4>写文章</h4></div>
                <el-input
                        type="textarea"
                        autosize
                        placeholder="文章标题"
                        v-model="title" class="input">
                </el-input>
                <div style="margin: 20px 0;"></div>
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="文章副标题"
                        v-model="subtitle" class="input">
                </el-input>
            </div>
            <!--    富文本编辑器-->
            <textarea id="editor_id" name="content">
                <h4>文章内容</h4>
            </textarea>
            <div class="sub">
                <el-button @click="submit" type="info">点击提交</el-button>
                <el-button @click="back" type="info">返回首页</el-button>
            </div>
        </el-main>
    </el-container>


</div>

</body>


<!--        导入组件库-->
<script charset="UTF-8" src="../plugins/kindeditor/kindeditor-all-min.js"></script>
<script charset="UTF-8" src="../plugins/kindeditor/lang/zh-CN.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>

<script>
    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id');
    });

    new Vue({
        el: "#ed",
        data() {
            return {
                title: '',
                subtitle: '',
                html: ''
            }
        },
        methods: {
            submit() {
                this.html = editor.html();
                // 同步数据后可以直接取得textarea的value
                editor.sync();
                html = document.getElementById('editor_id').value;
                console.log(html)
            },
            back(){
                window.location.href = 'index.html'
            }
        }
    })

</script>
</html>